<template>
  <Tree :data="treeData" :render="renderContent" class="tree-render"></Tree>
</template>
<script>
    import storeVar from '../../mixins/storeVar';
    export default {
        mixins: [storeVar],
        props: {
            category: {
                default: () => {
                    return 'attrs';
                }
            }
        },
        watch: {
            /**
             *compGroup.currentItem.property.nodeTree,添加render函数
             */
            'compGroup': {
                handler (compGroup) {
                    let treeData = this.lodash.cloneDeep(compGroup.currentItem.property.nodeTree);
                    this.originalData = this.lodash.cloneDeep(compGroup.currentItem.property.nodeTree);
                    treeData[0] = {
                        ...treeData[0],
                        render: (h, { root, node, data }) => {
                            return this.renderTitle(h, { root, node, data });
                        }
                    };
                    this.treeData = treeData;
                },
                deep: true,
                immediate: true
            }
        },
        data () {
            return {
                buttonProps: {
                    type: 'default',
                    size: 'small'
                },
                treeData: [],
                originalData: []
            };
        },
        methods: {
            renderTitle (h, { root, node, data }) {
                return h(
                    'span',
                    {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        }
                    },
                    [
                        h('Icon', {
                            style: {
                                marginRight: '8px'
                            },
                            props: {
                                type: 'ios-folder-outline'
                            }
                        }),
                        h('Input', {
                            style: {
                                display: 'inline-block',
                                width: '40%'
                            },
                            attrs: {
                                value: data.title
                            },
                            on: {
                                'on-change': (e) => {
                                    data.title = e.target.value;
                                    this.updateNodeTree(data.nodeKey, data)
                                }
                            }
                        }),
                        h(
                            'span',
                            {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '32px'
                                }
                            },
                            [
                                h('Button', {
                                    props: {
                                        ...this.buttonProps,
                                        type: 'primary',
                                        icon: 'ios-add'
                                    },
                                    style: {
                                        width: '64px',
                                        height: '32px'
                                    },
                                    on: {
                                        click: () => {
                                            this.append(data);
                                            this.updateNodeTree(data.nodeKey, data)
                                        }
                                    }
                                })
                            ]
                        )
                    ]
                );
            },
            renderContent (h, { root, node, data }) {
                return h(
                    'span',
                    {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        }
                    },
                    [
                        h('Icon', {
                            style: {
                                marginRight: '8px'
                            },
                            props: {
                                type: 'ios-paper-outline'
                            }
                        }),
                        h('Input', {
                            style: {
                                display: 'inline-block',
                                width: '40%'
                            },
                            attrs: {
                                value: data.title
                            },
                            on: {
                                'on-change': (e) => {
                                    data.title = e.target.value;
                                    this.updateNodeTree(data.nodeKey, data)
                                }
                            }
                        }),
                        h(
                            'span',
                            {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '32px'
                                }
                            },
                            [
                                h('Button', {
                                    props: {
                                        ...this.buttonProps,
                                        type: 'primary',
                                        icon: 'ios-add'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.append(data);
                                            this.updateNodeTree(data.nodeKey, data)
                                        }
                                    }
                                }),
                                h('Button', {
                                    props: {
                                        ...this.buttonProps,
                                        icon: 'ios-remove'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(root, node, data);
                                            this.updateNodeTree(data.nodeKey, data)
                                        }
                                    }
                                })
                            ]
                        )
                    ]
                );
            },
            append (data) {
                const children = data.children || [];
                children.push({
                    title: 'appended node',
                    expand: true
                });
                data.children = children;
            },
            remove (root, node, data) {
                const parentKey = root.find((el) => el === node).parent;
                const parent = root.find((el) => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },
            /**
             * 同步class文件nodeTree
             */
            updateNodeTree (nodeKey, data) {
                let cloneData = this.lodash.cloneDeep(this.treeData)
                this.updateItem(cloneData, nodeKey, data)
                this.compGroup.currentClassObject.updateNodeTree(cloneData)
                this.syncGroup();
            },
            updateItem (array, nodeKey, data) {
                if (!array) {
                    return
                }
                for (let i = 0; i < array.length; i++) {
                    let index = -1;
                    if (array[i].nodeKey === nodeKey) {
                        index = i;
                    }
                    if (index !== -1) {
                        array[index] = data;
                        delete array[index].render;
                        break;
                    } else {
                        delete array[i].render;
                        this.updateItem(array[i].children, nodeKey, data)
                    }
                }
            }

        }
    };
</script>
<style scoped lang="scss">
.tree-render {
  ::v-deep .ivu-tree-title {
    width: 100%;
  }
}
</style>
